<template>
  <div class="container">
    <div class="box">
      <div class="font-box" v-for="(list, key) in lists" :key="key">
        <i class="iconfont" :class="list.icon" :style="{ color: list.color }"></i>
        <label>{{ list.title }}</label>
      </div>
    </div>
    <div class="box">
      <div class="font-box" v-for="(listWrap, key) in lists_warp" :key="key">
        <i class="iconfont" :class="listWrap.icon" :style="{ color: listWrap.color }"></i>
        <label>{{ listWrap.title }}</label>
      </div>
    </div>
    <Banner />
  </div>
</template>

<script>
import Banner from "../views/Banner";
export default {
  name: "shop",

  data() {
    return {
      lists: [
        {
          title: "美食",
          icon: "icon-bingqiling-tiantong-xuegao",
          color: "rgb(250, 153, 43)"
        },
        {
          title: "电影",
          icon: "icon-3Dyanjing-yanjing-guanying",
          color: "rgb(13, 149, 228)"
        },
        {
          title: "住宿",
          icon: "icon-yizi-shafa-zhuoyi-xiuxi-dengdai",
          color: "rgb(226, 114, 8)"
        },
        {
          title: "娱乐",
          icon: "icon-maikefeng-Kge-KTV-huatong",
          color: "rgb(177, 240, 32)"
        }
      ],
      lists_warp: [
        {
          title: "外卖",
          icon: "icon-elemo-waimai-canyin",
          color: "rgb(65, 125, 255)"
        },
        {
          title: "打车",
          icon: "icon-jiaoche-qiche-jiaotong-chuzuche-chuhang",
          color: "rgb(245, 140, 91)"
        },
        {
          title: "景点",
          icon: "icon-xiangji-paizhao-danfan-xiangji-camera",
          color: "rgb(130, 99, 240)"
        },
        {
          title: "旅游",
          icon: "icon-baobao-xiangbao-kuabao",
          color: "rgb(247, 119, 252)"
        }
      ]
    };
  },

  components: {
    Banner
  }
};
</script>

<style lang="scss" scoped>
.container {
  .box {
    display: flex;
    justify-content: space-around;
    margin: 20px 10px;
    .font-box {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      text-align: center;
      margin-right: 20px;
      .iconfont {
        font-size: 40px;
        &::after {
          content: "";
          display: block;
          height: 2px;
          width: 40px;
          background-color: pink;
          margin: 5px 0;
        }
      }
    }
  }
}
</style>
